Skip to content

feat: add xblockScroll event handler to iframeMessageTypes #2363

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 7 commits into from
Aug 15, 2025
Merged

feat: add xblockScroll event handler to iframeMessageTypes #2363

merged 7 commits into from
Aug 15, 2025

Conversation

saraburns1
Copy link
Contributor

@saraburns1 saraburns1 commented Aug 8, 2025 •
edited by brian-smith-tcril
Loading

Description

Fixes openedx/openedx-aspects#316 by scrolling window to the xblock location instead of scrolling within the iFrame

Supporting information

Link to other information about the change, such as GitHub issues, or Discourse discussions.
Be sure to check they are publicly readable, or if not, repeat the information here.

Testing instructions

Test with openedx/edx-platform#37152
Need to enable Aspects in-context metrics (https://github.com/openedx/frontend-plugin-aspects)

Other information

Include anything else that will help reviewers and consumers understand the change.

  • Does this change depend on other changes elsewhere?
  • Any special concerns or limitations? For example: deprecations, migrations, security, or accessibility.

Best Practices Checklist

We're trying to move away from some deprecated patterns in this codebase. Please
check if your PR meets these recommendations before asking for a review:

  • Any new files are using TypeScript (.ts, .tsx).
  • Deprecated propTypes, defaultProps, and injectIntl patterns are not used in any new or modified code.
  • Tests should use the helpers in src/testUtils.tsx (specifically initializeMocks)
  • Do not add new fields to the Redux state/store. Use React Context to share state among multiple components.
  • Use React Query to load data from REST APIs. See any apiHooks.ts in this repo for examples.
  • All new i18n messages in messages.ts files have a description for translators to use.
  • Imports avoid using ../. To import from parent folders, use @src, e.g. import { initializeMocks } from '@src/testUtils'; instead of from '../../../../testUtils'

Settings

EDX_PLATFORM_REPOSITORY: https://github.com/openedx/edx-platform.git
EDX_PLATFORM_VERSION: sburns_unit_iframe_cutoff

This was referenced Aug 8, 2025
Merged
Closed
@codecov Codecov
Copy link

codecov bot commented Aug 8, 2025 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.47%. Comparing base (915bd55) to head (97f383d).
⚠️ Report is 16 commits behind head on master.

Additional details and impacted files 
@@            Coverage Diff             @@
##           master    #2363      +/-   ##
==========================================
+ Coverage   94.44%   94.47%   +0.03%     
==========================================
  Files        1169     1169              
  Lines       25073    25139      +66     
  Branches     5460     5491      +31     
==========================================
+ Hits        23679    23750      +71     
- Misses       1322     1324       +2     
+ Partials       72       65       -7

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@brian-smith-tcril brian-smith-tcril added the create-sandbox open-craft-grove should create a sandbox environment from this PR label Aug 13, 2025
@open-craft-grove
Copy link

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

@brian-smith-tcril
Copy link
Contributor

I tested this on the sandbox using a modified version of the testing instructions from openedx/edx-platform#36478

  1. Now go to the Studio and open the "Unit page" of a course.
  2. Use the inspector and copy a XBlock ID for testing. (preferable one that's in the bottom of the page)
  3. Now switch to the JS Console and use the following snippet to post a message. The page should scroll to the XBlock
let blockId = "<your-block-id>";
let iframe = document.getElementsByName("xblock-iframe")[0];
iframe.contentWindow.postMessage({type: "scrollToXBlock", payload: { locator: blockId }}, target="http://studio.local.openedx.io:8001")

Make sure that the context it "top" pointing to the MFE in the console, and adjust the target value to your studio URL.
image

  1. I navigated to the "Welcome to the Open edX® platform" unit
  2. I set the blockId to the top block let blockId = "block-v1:demo+Course+1+type@html+block@a01fc100e5e64fc5bbca09daa190cfee"
  3. I scrolled to the bottom of the page and ran iframe.contentWindow.postMessage({type: "scrollToXBlock", payload: { locator: blockId }}, target="https://studio.pr-2363-4ee631.sandboxes.opencraft.hosting/")

🎉 The block scrolled into view as expected! 🎉

I did notice that it didn't do a smooth scroll. I'm not sure if the smooth scroll was working as expected before or not, but when reviewing openedx/edx-platform#37152 I noticed the previous implementation had behavior: "smooth"

case 'scrollToXBlock':
    document.getElementById(data.payload.locator)?.scrollIntoView({behavior: "smooth"});
    break;

I think updating

frontend-app-authoring/src/generic/hooks/useIframeBehavior.tsx

Line 89 in 61f1632

window.scrollTo(0, data.offset + iframeElement!.offsetTop + iframeElement.parentElement!.offsetTop);

to use the options syntax for scrollTo (MDN docs) and including behavior: "smooth" should do the trick!

@saraburns1
Copy link
Contributor Author

@brian-smith-tcril updated! thanks!

@open-craft-grove
Copy link

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

@open-craft-grove
Copy link

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

brian-smith-tcril
brian-smith-tcril approved these changes Aug 15, 2025
View reviewed changes
Copy link
Contributor

@brian-smith-tcril brian-smith-tcril left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect! Tested on the latest sandbox deployment and this is scrolling smoothly now!

@brian-smith-tcril brian-smith-tcril merged commit be82e96 into master Aug 15, 2025
7 checks passed
@brian-smith-tcril brian-smith-tcril deleted the sburns_unit_iframe_cutoff branch August 15, 2025 13:11
@brian-smith-tcril brian-smith-tcril changed the title fix: scroll entire window instead of iframe feat: add xblockScroll event handler to iframeMessageTypes Aug 15, 2025
@brian-smith-tcril brian-smith-tcril mentioned this pull request Aug 18, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@brian-smith-tcril brian-smith-tcril brian-smith-tcril approved these changes

@farhaanbukhsh farhaanbukhsh Awaiting requested review from farhaanbukhsh

Assignees
No one assigned
Labels
create-sandbox open-craft-grove should create a sandbox environment from this PR
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

In-context metrics: First component in a unit cut off when there is a warning on the Studio unit page
3 participants
@saraburns1 @open-craft-grove @brian-smith-tcril